<template>
  <div>
    <pform ref="form" :model="form" lw="150">
      <div class="flex-c">
        <el-button type="primary" circle>1</el-button>
        <h3 style="margin-left: 15px;width:100px" >基础配置</h3>
        <el-divider/>
      </div>

      <el-form-item label="名称">
        <el-input size="small" style="width:233px;height:30px" v-model="form.field10" placeholder="请输入"></el-input>
      </el-form-item>
    
      <el-form-item label="模板">
        <el-select
          style="width:233px;"
          v-model="form.field1"
          placeholder="请选择模板"
        >
          <el-option label="通过web服务器" value="dn"></el-option>
          <el-option label="开发全部端口" value="nf"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="描述">
        <el-input type="textarea" :autosize="{ minRows: 4}" v-model="editValue" placeholder="请输入" style="width:533px;"></el-input>

      </el-form-item>
     
 

      <el-form-item label="">
          <el-button type="primary" @click="hasTeblate=!hasTeblate" >{{hasTeblate?'隐藏模板规则':'查看模板规则'}}</el-button>
        
      </el-form-item>
   
      <el-form-item label="镜像" v-if="hasTeblate">
        <el-radio-group
          v-model="form.field6"
          @change="mirrorChange"
          style="margin-bottom: 20px;"
        >
          <el-radio-button label="入方向"></el-radio-button>
          <el-radio-button label="出方向"></el-radio-button>
        </el-radio-group>
        <div class="flex-c"  v-show="form.field6 == '入方向'">
          <el-table
          :data="tableData1"
          >
          <el-table-column
            prop="date"
            label="优先级"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="策略"
            >
          </el-table-column>
          <el-table-column
            prop="address"
            label="类型">
          </el-table-column>
          <el-table-column
            prop="address1"
            label="协议端口">
          </el-table-column>
          <el-table-column
            prop="address2"
            width="180"
            label="源地址">
          </el-table-column>
        </el-table>
        </div>
      
        <div  v-show="form.field6 == '出方向'">
          <el-table
          :data="tableData2"
          style="width: 100%">
          <el-table-column
            prop="date"
            label="优先级"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="策略"
            >
          </el-table-column>
          <el-table-column
            prop="address"
            label="类型">
          </el-table-column>
          <el-table-column
            prop="address1"
            label="协议端口">
          </el-table-column>
          <el-table-column
            prop="address2"
            width="180"
            label="源地址">
          </el-table-column>
        </el-table>
        </div>
      
      </el-form-item>

      <div class="step-btn-box">
        <el-button type="primary" @click="handleAdd">立即注册</el-button>
      </div>

 

    </pform>
  </div>
</template>

<script>
// import pform from '@/components/publicForm.vue'
export default {
  // components:{pform},
  data() {
    return {
      hasTag: false,
      tableData1: [{
            date: '1',
            name: '允许',
            address: 'IPv4',
            address1: 'TCP:22',
            address2: '0.0.0./0'
          },{
            date: '1',
            name: '允许',
            address: 'IPv4',
            address1: 'TCP:99',
            address2: 'sq-15ef'
          },{
            date: '1',
            name: '允许',
            address: 'IPv4',
            address1: 'ICMP:全部',
            address2: '0.0.0./0'
          },{
            date: '1',
            name: '允许',
            address: 'IPv4',
            address1: '全部',
            address2: '0.0.0./0'
          },],
          tableData2: [{
            date: '1',
            name: '允许',
            address: 'IPv4',
            address1: 'TCP:22',
            address2: '0.0.0./0'
          },{
            date: '1',
            name: '允许',
            address: 'IPv6',
            address1: 'TCP:99',
            address2: 'sq-15ef'
          },{
            date: '1',
            name: '允许',
            address: 'IPv4',
            address1: 'ICMP:全部',
            address2: '：：.0/0'
          },{
            date: '1',
            name: '允许',
            address: 'IPv4',
            address1: '全部',
            address2: '0.0.0./0'
          },],
      hasTeblate: true,
      form: {
        field1: "",
        field2: "高性能资源池",
        field3: "新建虚拟机",
        field4: "1",
        field5: "BIOS",
        field6: "入方向",
        field7: "",
        field8: "",
        field9: "",
        field10: "",
        field11: "",
        field12: "是",
        field13: "",
        field14: "",
        field15: "",
        field16: "",
        field17: "",
        field18: "",
        field19: ""
      },
      option: [
        { label: "1111", value: "1111" },
        { label: "2222", value: "2222" },
        { label: "3333", value: "3333" }
      ],
      // option1操作系统 option2操作系统 option3操作系统 option4操作系统
      option1: [
        { label: "CentOS", value: "CentOS" },
        { label: "Ubuntu", value: "Ubuntu" },
        { label: "Windows", value: "Windows" }
      ],
      option2: [
        {
          label: "Ubuntu 1804 x86 server 64bit sdi2 for BareMetal With Uniagen",
          value: "CentOS"
        },
        {
          label: "Ubuntu 1804 x86 server 64bit sdi2 for BareMetal With Uniagen",
          value: "Ubuntu"
        },
        {
          label: "Ubuntu 1804 x86 server 64bit sdi2 for BareMetal With Uniagen",
          value: "Windows"
        }
      ],
      option3: [
        { label: "请选择镜像类别", value: "请选择镜像类别" },
        { label: "操作系统", value: "操作系统" },
        { label: "数据库与缓存", value: "数据库与缓存" },
        { label: "应用运行环境", value: "应用运行环境" },
        { label: "管理与监控", value: "管理与监控" },
        { label: "网络与安全", value: "网络与安全" },
        { label: "开发语言环境", value: "开发语言环境" },
        { label: "中间件等", value: "中间件等" }
      ],
      option4: [
        { label: "Check Point CloudGuard", value: "CentOS" },
        { label: "Check Point CloudGuard", value: "Ubuntu" },
        { label: "Check Point CloudGuard", value: "Windows" }
      ]
    };
  },
  methods: {
    init() {},
    getFormData() {
      return JSON.parse(JSON.stringify(this.form));
    },
    delTag() {
      this.hasTag = false;
      this.form.tagKey = "";
      this.form.tagVal = "";
    },
    mirrorChange(val) {
      this.form.OS = "";
      this.form.OSType = "";
      this.form.morType = "";
      this.form.morName = "";
    },
    resetMor() {
      this.form.morType = "";
      this.form.morName = "";
    },
    // 新建镜像
    createMOR() {},
    handleAdd(){
      console.log('跳转新增页');
      this.$router.push({
        path: '/networkSecurity/accessControl'
      })
    }
  }
};
</script>

<style scoped lang="less">
.role-desbox {
  width: 932px;
  min-height: 125px;

  .escplasin {
    font-size: 12px;
    color: #aaaaaa;
  }

  .esclist {
    height: 50px;
    display: flex;
    align-items: center;

    .e-item {
      color: #333333;
      width: 160px;
      text-align: center;
    }
    .e-item-2 {
      display: flex;
      flex-flow: column nowrap;
      div {
        height: 25px;
        line-height: 25px;
      }
    }
  }

  .esclist-t {
    height: 35px;
    background-color: rgba(242, 242, 242, 1);
  }
}
</style>
